<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" ></c:set><html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/login.css"></link>
    <title>登录</title>
</head>
<body>
<div class="main">
    <div class="title">
        <span>密码登录</span>
    </div>
    <div class="title-msg">
        <span>请输入登录账户和密码</span>
    </div>
    <form class="login-form" method="post" novalidate action="${ctx}/login">
        <!--输入框-->
        <div class="input-content">
            <!--autoFocus-->
            <div>
                <input type="text" autocomplete="off" placeholder="用户名" name="username" required
                       value="${cookie.username.value}"/>
            </div>
            <div style="margin-top: 16px">
                <input type="password" autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"
                       value="${cookie.password.value}"/>
            </div>
            <div class="remember-me-box">
                <p>
                    <input type="checkbox" id="rememberMe" name="rememberMe" value="1" checked>记住我
                </p>
            </div>
        </div>
        <!--登入按钮-->
        <div style="text-align: center">
            <button type="submit" class="enter-btn" >登录</button>
        </div>
        <div class="foor">
            <div class="left"><span id="msgBox" style="color: red">${LOGIN_MSG}</span></div>
            <div class="right">
                <a href="register.jsp" style="text-decoration: none;color: #353f42;">
                    <span>注册账户</span>
                </a>
            </div>
        </div>
    </form>
</div>
<script>
    let msgBox = document.getElementById("msgBox");
    setTimeout(()=>{
        msgBox.innerHTML="";
    },3000);

    // 记住我 复选框打勾功能
    let rememberMe = document.querySelector("#rememberMe");
    rememberMe.addEventListener('click',function (){
        //获取复选框状态
        let b = rememberMe.hasAttribute('checked');//true有 false未勾选
        if (b){
            //去掉勾：checked，value
            rememberMe.removeAttribute('checked')
            rememberMe.setAttribute('value','0')
        }else {
            //勾上：增加checked value＝1
            rememberMe.setAttribute('checked','')
            rememberMe.setAttribute('value','1')
        }
    })
</script>
</body>
</html>
